// 响应式栅格属性接口
export interface TuiBreakpointProps {
  span?: number;
  offset?: number;
  push?: number;
  pull?: number;
}

// Col属性接口
export interface TuiColProps {
  /**
   * 栅格占据的列数
   */
  span?: number;
  /**
   * 栅格左侧的间隔格数
   */
  offset?: number;
  /**
   * 栅格向右移动格数
   */
  push?: number;
  /**
   * 栅格向左移动格数
   */
  pull?: number;
  /**
   * <768px 响应式栅格数或者栅格属性对象
   */
  xs?: number | TuiBreakpointProps;
  /**
   * ≥768px 响应式栅格数或者栅格属性对象
   */
  sm?: number | TuiBreakpointProps;
  /**
   * ≥992px 响应式栅格数或者栅格属性对象
   */
  md?: number | TuiBreakpointProps;
  /**
   * ≥1200px 响应式栅格数或者栅格属性对象
   */
  lg?: number | TuiBreakpointProps;
  /**
   * ≥1920px 响应式栅格数或者栅格属性对象
   */
  xl?: number | TuiBreakpointProps;
  /**
   * 自定义元素标签
   */
  tag?: string;
}

// Row属性接口
export interface TuiRowProps {
  /**
   * 栅格间距
   */
  gutter?: number;
  /**
   * flex 布局下的水平排列方式
   */
  justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between';
  /**
   * flex 布局下的垂直对齐方式
   */
  align?: 'top' | 'middle' | 'bottom';
  /**
   * 自定义元素标签
   */
  tag?: string;
}

// Container属性接口
export interface TuiContainerProps {
  /**
   * 子元素的排列方向
   */
  direction?: 'horizontal' | 'vertical';
}

// Header属性接口
export interface TuiHeaderProps {
  /**
   * 高度 
   */
  height?: string | number;
}

// Aside属性接口
export interface TuiAsideProps {
  /**
   * 侧边栏宽度
   */
  width?: string | number;
  
  /**
   * 是否隐藏滚动条
   */
  scrollHidden?: boolean;
}

// Footer属性接口
export interface TuiFooterProps {
  /**
   * 高度 
   */
  height?: string | number;
}

// Main属性接口
export interface TuiMainProps {
  /**
   * 自定义元素标签
   */
  tag?: string;
}